'use client';
import * as React from 'react';
import { useStore } from '@base-ui-components/utils/store';
import { useRenderElement } from '../../base-ui-copy/utils/useRenderElement';
import { BaseUIComponentProps } from '../../base-ui-copy/utils/types';
import { useTimelineStoreContext } from '../../use-timeline-store-context';
import { timelineViewSelectors } from '../../timeline-selectors';
import { TimelineRootCssVars } from './TimelineRootCssVars';
import { schedulerResourceSelectors } from '../../scheduler-selectors';

export const TimelineRoot = React.forwardRef(function TimelineRoot(
  componentProps: TimelineRoot.Props,
  forwardedRef: React.ForwardedRef<HTMLDivElement>,
) {
  const {
    // Rendering props
    className,
    render,
    // Props forwarded to the DOM element
    ...elementProps
  } = componentProps;

  // Context hooks
  const store = useTimelineStoreContext();

  // Selector hooks
  const resourcesCount = useStore(store, schedulerResourceSelectors.resourcesCount);
  const viewConfig = useStore(store, timelineViewSelectors.config);

  const props = {
    role: 'grid',
    style: {
      [TimelineRootCssVars.unitCount]: viewConfig.unitCount,
      [TimelineRootCssVars.rowCount]: resourcesCount,
    } as React.CSSProperties,
  };

  return useRenderElement('div', componentProps, {
    ref: [forwardedRef],
    props: [props, elementProps],
  });
});

export namespace TimelineRoot {
  export interface State {}

  export interface Props extends BaseUIComponentProps<'div', State> {}
}
